<template>
	<view class="state">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title" :share="false"></public-header>
		<view class="hei_100"></view>
		<!-- #endif -->
		<!-- end -->

		<!-- 内容 -->
		<view class="address padd_32">
			<view class="title">服务地址</view>
			<view class="cont clearfix">
				<view class="fl">
					<view class="name">{{order.contactsName}}</view>
					<view class="phone">{{order.contactsPhone}}</view>
					<view class="add">{{order.province}}{{order.city}}{{order.region}}{{order.address}}</view>
				</view>
			</view>
		</view>

		<view class="situation padd_32">
			<view class="list clearfix">
				订单状态
				<text class="fr" v-if="order.orderStatus">{{order.orderStatus.name}}</text>
			</view>
			<view class="list clearfix">
				订单编号
				<text class="fr">{{order.orderCode}}</text>
			</view>
			<view class="list clearfix">
				订单时间
				<text class="fr">{{order.orderTime}}</text>
			</view>

		</view>


		<view class="situation padd_32">
			<view class="list clearfix">
				<text class="" style="color: #00aaff;" @click="toShop(order.enterpriseId)">{{order.enterpriseName||'-'}}</text>
			</view>
			<view class="list clearfix">
				预约时间
				<text class="fr">{{order.appointmentDatetime == null ? '暂无预约时间' : order.appointmentDatetime}}</text>
			</view>
			<view class="list clearfix">
				服务类型
				<text class="fr" v-if="order.business">{{order.business.name}}</text>
			</view>
			<view class="list clearfix">
				服务价格
				<text class="fr">{{order.univalence}}*{{order.amount}}{{order.univalenceUnit}}</text>
			</view>
			<view class="list clearfix">
				服务员工
				<text class="fr" style="color: #00aaff;" v-if="order.employeeVo" @click="toStaff(order.employeeVo.id, order.enterpriseId)">{{order.employeeVo.name}}</text>
			</view>
			<view class="list clearfix">
				订单总价
				<text class="fr">{{order.statusId == 1 && order.typeId ==1  ? '**' : order.price }}元</text>
			</view>
			<view class="list clearfix" v-if="fan.length > 0 ">
					<text class="fr" style="color: #FCC800;" @click="fankui()">反馈记录</text>
			</view>
			<view class="requirement">
				<view>备注：</view>
				<!-- <input type="text" disabled="true" :value="order.comments"/> -->
				<view>{{order.comments}}</view>
				<view class="hei_100">

				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="btn padd_32" v-if="order&&order.orderStatus&&order.orderStatus.operation">
			<order-btn :orderId="order.id" :businessId="order.business.id" :orderBtn='JSON.parse(order.orderStatus.operation)'></order-btn>
		</view>
		<view class="hei_100"></view>
		<!-- end -->
	</view>
</template>

<script>
	import PublicHeader from '@/components/PublicHeader.vue';
	import OrderBtn from '@/components/button/OrderBtn.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['hasLogin', 'uerInfo']),
		components: {
			PublicHeader,
			OrderBtn,
			uniPopup
		},
		data() {
			return {
				title: '订单详情',
				order: '',
				ticket: '',
				ticket_pri: {
					pri: '',
					id: ''
				},
				fan:''
			};
		},
		onLoad(option) {
			var _this = this
			// 优惠券
			if (_this.hasLogin) {
				_this.$http
					.get('/user/order/vieworderdetail/' + option.sid)
					.then(function(response) {
						_this.order = response.data
						_this.fan = response.data.orderIssueVoList
					})
					.catch(function(error) {
						console.log(error);
					});

				_this.$http
					.get('/personal/center/getusercoupons/' + _this.uerInfo.userId)
					.then(function(response) {
						_this.ticket = response.data;
					})
					.catch(function(error) {
						console.log(error);
					});
			}

		},
		methods: {
			toShop(id) {
				uni.navigateTo({
					url: '/pages/details/details-shop?sid=' + id + '&id=' + '',
				})
			},
			toStaff(sid, id) {
				uni.navigateTo({
					url: '/pages/details/details-staff?sid=' + sid + '&id=' + id,
				})
			},
			open() {
				var _this = this;
				if (_this.ticket.canuse.length == 0 || undefined) {} else {
					_this.$refs.popup.open();
				}
			},
			close() {
				this.$refs.popup.close();
			},
			ticket_act(id, pri) {
				var _this = this;
				_this.ticket_pri.pri = pri;
				_this.ticket_pri.id = id;
				_this.price_pay = (_this.price - _this.ticket_pri.pri).toFixed(2);
			},
			fankui(){
				uni.navigateTo({
					url:'/pageageA/pages/order/record?orderId=' + this.order.id
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.situation {
		/* min-height: 380rpx; */
		/* border-top: 16rpx solid #F7F8F9; */
		border-bottom: 16rpx solid #F7F8F9;
	}

	.situation view {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #dfdfdf;
		font-size: 32rpx;
		color: #333;
	}

	.situation view .fr {
		font-size: 26rpx;
	}

	.situation view:last-child {
		border-bottom: 0 none;
	}

	.address {
		min-height: 280rpx;
		border-bottom: 16rpx solid #F7F8F9;
	}

	.address .title {
		border: 0 none;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border-bottom: 1rpx solid #dfdfdf;
	}

	.address .cont {
		padding-top: 20rpx;
		padding-bottom: 10rpx;
		font-size: 26rpx;
		color: #333;
	}

	.address .cont view {
		margin-bottom: 10rpx;
		width: 648rpx;
	}

	.address .cont .phone {
		color: #666;
	}

	.address .cont .add {
		color: #999;
		font-size: 24rpx;
	}

	.address .cont image {
		width: 16rpx;
		margin-top: 40rpx;
	}

	.discount {
		/* margin-bottom: 46rpx; */
		border-bottom: 16rpx solid #F7F8F9;
	}

	.discount view {
		height: 80rpx;
		line-height: 80rpx;
		color: #999;
		font-size: 26rpx;
	}

	.discount image {
		width: 14rpx;
		margin-top: 28rpx;
		margin-left: 10rpx;
	}

	.discount text {
		color: #333;
	}

	.payment view {
		font-size: 48rpx;
		color: $uni-color1;
		height: 88rpx;
		line-height: 88rpx;
	}

	.payment input {
		display: inline-block;
		color: $uni-color1;
		font-size: 48rpx;
		height: 88rpx;
		line-height: 88rpx;
		padding-left: 20rpx;
		width: 610rpx;
	}

	.payment .tit {
		font-size: 32rpx;
		color: #333;
		line-height: 80rpx;
		height: 80rpx;
	}

	.payment .tit text {
		font-size: 28rpx;
		color: #999;
	}

	.pay {
		/* height: 88rpx; */
		line-height: 80rpx;
		font-size: 32rpx;
		color: #333;
		border-bottom: 60rpx solid #F7F8F9;
	}

	.pay .fr {
		color: $uni-color1;
	}

	.requirement {
		border-bottom: 1rpx solid #dfdfdf;
	}

	.requirement view {
		color: #333;
		font-size: 32rpx;
		line-height: 100rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #dfdfdf;
	}

	.requirement input {
		height: 136rpx;
	}

	.btn {
		background-color: #fff;
		padding: 27rpx 32rpx;
		width: 100%;
		text-align: right;
		position: fixed;
		bottom: 0;
	}

	.details {
		border-bottom: 16rpx solid #F7F8F9;
	}

	.details .tit {
		font-size: 30rpx;
		color: #333;
		margin-top: 30rpx;
	}

	.details .tit image {
		width: 30rpx;
		margin-top: 8rpx;
		margin-right: 16rpx;
	}

	.details .tit .arr {
		width: 14rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.details .cont {
		font-size: 24rpx;
		color: #999;
		padding: 22rpx 0;
		margin-bottom: 26rpx;
	}

	.details .cont image {
		width: 110rpx;
		border-radius: 10rpx;
	}

	.details .cont .name {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.details .cont .price {
		margin-top: 40rpx;
	}
</style>
